<template>
  <div class="wish-card" :class="{ 'is-owner': isOwner }">
    <div class="wish-content">{{ wish.content }}</div>
    <div class="wish-info">
      <span class="wish-author">来自: {{ wish.user?.userName || '匿名用户' }}</span>
      <span class="wish-time">{{ formatTime(wish.createTime) }}</span>
    </div>
    <div v-if="isOwner" class="wish-actions">
      <button class="edit-btn" @click="$emit('edit', wish)">编辑</button>
      <button class="delete-btn" @click="$emit('delete', wish)">删除</button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '../stores/user'

const props = defineProps({
  wish: {
    type: Object,
    required: true
  }
})

defineEmits(['edit', 'delete'])

const userStore = useUserStore()

const isOwner = computed(() => {
  return userStore.currentUser?.id === props.wish.user?.id
})

const formatTime = (timestamp) => {
  if (!timestamp) return ''
  const date = new Date(timestamp)
  return date.toLocaleString()
}
</script>

<style scoped>
.wish-card {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wish-content {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.wish-info {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 0.9rem;
}

.wish-actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

button {
  padding: 0.3rem 0.8rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.edit-btn {
  background: #4CAF50;
  color: white;
}

.delete-btn {
  background: #f44336;
  color: white;
}

button:hover {
  opacity: 0.9;
}
</style>